<div class="panel panel-default panel-intro">
    
    <div class="panel-heading">
        {:build_heading(null,FALSE)}
        <ul class="nav nav-tabs" data-field="page">
            {foreach name="pageList" item="vo"}
            <li class="{:$Think.get.page === null && $key==0 ? 'active' : ''}{:$Think.get.page === (string)$vo.page ? 'active' : ''}"><a href="?page={$vo.page}" ><i class="fa fa-file-code-o"></i> {$vo.page_title}</a></li>
            {/foreach}
        </ul>
    </div>

    <div class="panel-body">
       <div class="left_phone">
           <div class="phone_box">
            {if condition="$Think.get.page === 'home' || $Think.get.page === null"}
                {include file="deerhome/design/phone_home" /}
            {/if}
            {if condition="$Think.get.page === 'cate'"}
                {include file="deerhome/design/phone_cate" /}
            {/if}
            {if condition="$Think.get.page === 'mall'"}
                {include file="deerhome/design/phone_mall" /}
            {/if}
            {if condition="$Think.get.page === 'yhq'"}
                {include file="deerhome/design/phone_yhq" /}
            {/if}
            {if condition="$Think.get.page === 'apply'"}
                {include file="deerhome/design/phone_apply" /}
            {/if}
            {if condition="$Think.get.page === 'wenti'"}
                {include file="deerhome/design/phone_wenti" /}
            {/if}
           </div>
           <div class="barre-apple"></div>
           <div class="barre-apple-top"></div>
       </div>
       <div class="right_design">
        {if condition="$Think.get.page === 'home' || $Think.get.page === null"}
                {include file="deerhome/design/phone_home_design" /}
        {/if}
        {if condition="$Think.get.page === 'mall'"}
                {include file="deerhome/design/phone_mall_design" /}
        {/if}
        {if condition="$Think.get.page === 'yhq'"}
                {include file="deerhome/design/phone_yhq_design" /}
        {/if}
        {if condition="$Think.get.page === 'apply'"}
                {include file="deerhome/design/phone_apply_design" /}
        {/if}
        {if condition="$Think.get.page === 'wenti'"}
                {include file="deerhome/design/phone_wenti_design" /}
        {/if}
       </div>
       <!-- /right_design -->
    </div>
</div>
<style>
    .control-label{
        font-size: 20px;
        margin-bottom: 10px;
    }
    .hide-deer{
        display: none;
    }
    .deer_design{
        display: none;
    }

    .panel-body{
        display: flex;
    }
    .right_design{
        flex:1;
        background-color: #fff;
        margin-left: 10px;
    }
    .left_phone{
        width: 400px;
        height: 800px;
        position: relative;
    }
    .phone_box{
        width: 370px;
        height: 750px;
        margin: 0 auto;
        border:12px solid #000;
        border-radius: 40px;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f7f7f7;
    }
    .phone_box::-webkit-scrollbar {
        width: 3px;
    }
    .phone_box::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 5px;
    }
    .barre-apple{
        position: absolute;
        width: 146px;
        height: 5px;
        left: 50%;
        margin-left: -73px;
        z-index: 999;
        top: 725px;
        background: rgb(0, 0, 0);
        border-radius: 1000px;
        transition: all 0.3s ease 0s;
    }
    .barre-apple-top{
        position: absolute;
        width: 146px;
        height: 35px;
        left: 50%;
        margin-left: -73px;
        z-index: 999;
        top: 0px;
        background: rgb(0, 0, 0);
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        transition: all 0.3s ease 0s;
    }
    .deer_clear{
        display: block;
        width: 100%;
        height: 20px;
        background: none;
        clear: both;
    }
    .deer_can_edit:hover,.deer_boder{
        border:2px dashed #4397fd;
    }
</style>